import {Card,Col,Row,Input,Button, DatePicker,Radio} from  'antd'
import dayjs from 'dayjs';
import type {GroupByParamsType} from '../../types/index'
import { useNavigate } from 'react-router-dom';
 

// 时间范围选择器
const { RangePicker } = DatePicker;
// 状态选项
const options = [
  { label: '全部', value: '' },
  { label: '待开始', value: '0' },
  { label: '预告中', value: '1' },
  { label: '进行中', value: '2' },
  { label: '已结束', value: '3' },
  { label: '提前结束', value: '4' },
];
interface Iprops{
  params:GroupByParamsType
  setParams:(params:GroupByParamsType)=>void
  getGroupBuyList:()=>void
  defaultParams:GroupByParamsType
}

// 传入的props解构
function SearchParams({params,setParams, getGroupBuyList,defaultParams}:Iprops) {
  const naviagate = useNavigate();
  // 重置方法
  function reset(){
    // 更新params
    setParams( defaultParams)
      // 监听paramms变化，重新请求数据如果params的值等于defaultParams重新请求
     
  }
  return ( <div className='SearchParams'>
    <Card title={<div>筛选查询  <Button type='primary' onClick={()=>naviagate('/admin/channel/createGroupBuy')}>添加商品</Button></div>} type="inner">
      <Row gutter={16}>
        <Col span={7}>
          <label >活动编号：</label>
          {/* 设置Input的值为params.id  当发生变化时候更新params，更新id */}
          <Input value={params.id} onChange={e=>setParams({...params,id:e.target.value})}/>
        </Col>
        <Col span={7}>
          <label >活动名称：</label>
          <Input value={params.name} onChange={e=>setParams({...params,name:e.target.value})}/>
        </Col>
        <Col span={10}>
          <label >活动开始时间：</label>
          {/* (dates,dateStrings)=>setParams({...params,startTime:dateStrings.join(",")}) */}
          <RangePicker 
            value={
            params.startTime?[dayjs(params.startTime.split(',')[0]),dayjs(params.startTime.split(',')[1])]:null
            }
          format={'YYYY-MM-DD'}  
          onChange={ (dates,dateStrings)=>{            
            var str = dateStrings.join(',');
            setParams({...params,startTime:str})
          }}/>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={7}>
          <label >参与商品：</label>
          <Input  value={params.products} onChange={e=>setParams({...params,products:e.target.value})}/>
        </Col>
        <Col span={7}>
          <label >参与门店：</label>
          <Input  value={params.shop} onChange={e=>setParams({...params,shop:e.target.value})}/>
        </Col>
        <Col span={10}>
          <label >活动结束时间：</label>
          <RangePicker format={'YYYY-MM-DD'} 
           value={
            params.endTime?[dayjs(params.endTime.split(',')[0]),dayjs(params.endTime.split(',')[1])]:null
            }
          onChange={ (dates,dateStrings)=>{          
            var str = dateStrings.join(',');
            setParams({...params,endTime:str})
          }}/>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={14}>
          <label >活动状态：</label>
          <Radio.Group
          options={options}         
          optionType="button"
          buttonStyle="solid"
          value={params.state}
          onChange={e=>setParams({...params,state:e.target.value})}
        />
        </Col>
        <Col span={10}>
          <Button type="primary" onClick={getGroupBuyList}>查询</Button>
          <Button onClick={reset}>重置</Button>
        </Col>
      </Row>
    </Card>
  </div> );
}

export default SearchParams;